<template>
    <div class="container">
        <el-form ref="form" :model="form" label-width="100px" size="mini" v-loading="loading">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="数据表名">
                        <el-input v-model="form.tableName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="数据表注释">
                        <el-input v-model="form.tableComment"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <div class="btnC">
                        <el-button type="danger" size="mini" class="mybtn" @click="delzb()"><i class="el-icon-minus"></i></el-button>
                        <el-button type="danger" size="mini" class="mybtn" @click="addzb()"><i class="el-icon-plus"></i></el-button>
                    </div>
                    <el-table :data="form.tableColumnsList" style="width: 100%" border @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55" align="center">
                        </el-table-column>
                        <el-table-column prop="columnName" label="字段名称">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.columnName" size="mini"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="columnComment" label="字段注释">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.columnComment" size="mini"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="columnLength" label="字段长度">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.columnLength" size="mini"></el-input>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>

            <el-form-item>
                <div style="text-align:center;margin-top:50px;">
                    <el-button type="primary" @click="onSubmit()">保存</el-button>
                    <el-button @click="go('list')">返回</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>


import { createTable } from '@/api/tzyy/sjkc'

export default {

    data() {
        return {
            loading: false,
            form: {
                tableName: '',
                tableComment: '',
                tableColumnsList: []
            },
            multipleSelection: []


        }
    },
    mounted() {

    },
    methods: {
        onSubmit() {



            let checkcolumnName = []
            let checkcolumnComment = []
            this.form.tableColumnsList.forEach(item => {
                checkcolumnName.push(item.columnName)
                checkcolumnComment.push(item.columnComment)
                if (item.columnName == '') {
                    this.$message.error('字段名称不能为空')
                    return false
                } else if (item.columnComment == '') {
                    this.$message.error('字段注释不能为空')
                    return false
                } else if (item.columnLength == '') {
                    this.$message.error('字段长度不能为空')
                    return false

                } else if (!/^[1-9]\d*$/.test(item.columnLength) || (item.columnLength < 0 && item.columnLength > 4000)) {
                    this.$message.error('字段长度为0-4000之前的数字')
                    return false
                }
            })
            let tempcolumnName = this.isRepeat(checkcolumnName) //字段名称 如果有重复则返回true，否则为false
            let tempcolumnComment = this.isRepeat(checkcolumnName) //字段注释 如果有重复则返回true，否则为false
            // let temp = this.arrHasvalue(list) 不推荐使用第二种方法，有问题
            if (tempcolumnName) {
                this.$message.error('字段名称不重复')
                return false
            }
            if (tempcolumnComment) {
                this.$message.error('字段注释不重复')
                return false
            }



            createTable(this.form).then(res => {
                this.loading = false
                if (res.code == 200) {
                    this.$message.success('保存成功！')
                    this.go('list')
                }
            })
            console.log('submit!');
        },
        addzb() {
            this.form.tableColumnsList.push({
                columnName: '',
                columnComment: '',
                columnLength: '',

            })
        },
        delzb() {
            for (let j = 0; j < this.multipleSelection.length; j++) {
                for (let i = 0; i < this.form.tableColumnsList.length; i++) {
                    if (this.multipleSelection[j].columnName == this.form.tableColumnsList[i].columnName) {
                        this.form.tableColumnsList.splice(i, 1)
                    }
                }
            }


        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
            console.log(this.multipleSelection)
        },
        // 判断是否重复
        isRepeat(arr) {
            var hash = {}
            for (var i in arr) {
                if (hash[arr[i]]) { return true }
                hash[arr[i]] = true
            }
            return false
        },

        //待处理
        go(name, params) {
            this.$emit('changePage', name, params);
        },
    }
}
</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    width: 100%;
    background-color: #fff;
    padding: 8px;

    .btn {
        padding: 8px 8px 8px 0;
    }
    .btnC {
        text-align: right;
        margin-bottom: 10px;

        .mybtn {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            padding: 0;
        }
    }
    .el-select,
    .el-input,
    .el-date-editor {
        width: 100%;
    }

    .imgIcon {
        width: 30px;
        height: 30px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .codeC {
        display: flex;
        justify-content: space-between;

        .tabs {
            width: 35px;

            .tabs-item {
                text-align: center;
                padding: 11px;
                height: 80px;
                background-color: rgba(22, 155, 213, 1);
                box-sizing: border-box;

                border-radius: 5px;
                -moz-box-shadow: none;
                -webkit-box-shadow: none;
                box-shadow: none;
                font-size: 14px;
                color: #ffffff;
                border-radius: 5px;
            }
        }
    }

    .vue-codemirror {
        // width: calc(100% - 35px);
        width: 100%;
        border: 1px solid #dcdfe6;
    }
}
</style>